<!--  -->
<template>
  <div>
    <xl-header :isBack="true">商品详情</xl-header>
    <div class="container">
      <div class="goods-info">
        <div class="goods-banner">
          <!-- <img src="img/goods-banner.png" /> -->
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="item in banner">
              <img :src="item" alt="" />
            </swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <div class="goods-explain">
          <h1 id="title">{{ detail.name }}</h1>
          <ul>
            <li>
              商品价格：<em id="price">￥{{ detail.price }}</em>
            </li>
            <li id="major">
              <!-- 专业：<span>移动互联开发</span> <span>移动互联应用</span> -->
            </li>
            <li>数量：<input type="number" v-model="num" />册</li>
          </ul>
        </div>
      </div>
      <div class="goods-details">
        <div class="detail-hd">
          <ul>
            <li class="active"><a href="javascript:void(0)">图文详情</a></li>
            <li><a href="javascript:void(0)">规格参数</a></li>
            <li><a href="javascript:void(0)">评价(199)</a></li>
          </ul>
        </div>
        <div class="detail-content" id="intro" style="display: block" v-html="detail.desc">
         
     

        </div>
        <div class="detail-content">
          <!-- <img src="img/loading.gif" class="loading" /> -->
          <p>等待加载 规格参数……</p>
        </div>
        <div class="detail-content">
          <!-- <img src="img/loading.gif" class="loading" /> -->
          <p>等待加载 评论……</p>
        </div>
      </div>
    </div>
    <!--底部-->
    <footer class="goods-detail-footer">
      <span>
        <a href="#" class="icon-fav fav">收藏</a>
        <a href="cart.html" class="icon-secCart secCart">购物车</a>
      </span>
      <a href="cart.html">去结算</a>
      <a href="javascript:void(0);" @click="add_cart" class="addCart">加入购物车</a>
    </footer>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  data() {
    return {
      banner: [],
      detail: {},
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
      },
      num: 1,
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  computed: {
    goods_id() {
      return this.$route.query.goods_id;
    },
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.get_goods_detail();
  },
  methods: {
    get_goods_detail() {
      let { goods_id } = this;

      this.$http
        .post("/api/get_goods_detail", {
          goods_id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            let data = res.data[0];
            this.banner = data.banner;
            this.detail = data;
            this.swiper.slideTo(3, 1000, false);
          }
        });
    },
    //  add_cart 
    add_cart(){
        //  userid,goods_id,num 

         let {goods_id,num} = this; 
             
             if(!goods_id){
                 alert('商品id不存在')
                 return 
             }
             if(num<1){
                   alert('数量不对')
                 return 
             }

             let userid = localStorage.getItem('uid');

            if(!userid){
                alert('请先登录')
                this.$router.push('/login')
                return 
            }
            
            this.$http.post('/api/add_cart',{
                userid,goods_id,num 
            })
            .then(res=>{
                 console.log(res)
                 if(res.code==1){
                     alert('加入购物车成功')
                 }else{
                     alert(res.msg)
                 }
            })

        
    }


  },
};
</script>



<style lang='scss'>
.container {
  max-width: 750px;
  min-width: 32px;
  margin: 0 auto;
  padding: 60px 0 60px 0;
}

.goods-detail-footer {
  line-height: 55px;
  height: 55px;
  padding: 0 10px;
  background: #fff;
  width: 100%;
  max-width: 750px;
  position: fixed;
  bottom: -1px;
  left: 0;
  right: 0;
  margin: auto;
  border-top: 1px solid #ddd;
  & > a {
    display: inline-block;
    padding: 0 10px;
    background: #ff9800;
    margin-right: -10px;
    color: #fff;
    font-size: 16px;
  }
  .addCart {
    background: #4d5f74;
    padding: 0 15px;
    margin-right: 0px;
  }
  .fav {
    text-align: center;
    width: 41px;
    height: 41px;
    padding-top: 12px;
    margin-right: 30px;
    background-position: -307px -42px;
  }
  .secCart {
    text-align: center;
    width: 45px;
    height: 41px;
    padding-top: 12px;
    background-position: -234px -43px;
  }
}

.goods-info {
  background: #fff;
  padding: 10px;
}
.goods-banner {
  min-height: 190px;
}
.goods-explain {
  padding: 10px 0;
}
.goods-explain h1 {
  font-size: 16px;
  margin-bottom: 10px;
}
.goods-explain li {
  line-height: 1.5;
}
.goods-explain li em {
  color: #c30000;
  font-size: 16px;
}
.goods-explain li input {
  text-align: center;
  width: 30px;
  font-weight: bold;
  border: 1px solid #e1e5ee;
  height: 24px;
  margin-right: 10px;
  border-radius: 3px;
}
.goods-details {
  margin-top: 10px;
  background: #fff;
}
.detail-hd {
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid #e1e5ee;
}
.detail-hd li {
  width: 32.333%;
  text-align: center;
  display: inline-block;
}
.detail-hd .active {
  line-height: 42px;
  border-bottom: 2px solid #ff9800;
}
.detail-content {
  padding: 10px;
  min-height: 400px;
  display: none;
  text-align: center;
}
.detail-content img {
  border: 1px solid #efefef;
  margin-bottom: 10px;
}
.detail-content .loading {
  width: 30px;
  height: 30px;
  border: none;
}
</style>